<template>
  <el-drawer
    v-model="dialogFormVisible"
    title="离职信息"
    size="80%"
    @close="handleClose"
  >
    <el-form
      ref="formRef"
      label-position="right"
      label-width="80px"
      size="default"
      :scroll-to-error="true"
      :show-message="false"
    >
      <el-form-item
        label="离职员工"
        class="label-right-align"
        label-width="120px"
        required
      >
        <el-text>{{ formData?.user?.real_name }}</el-text>
      </el-form-item>
      <el-form-item
        label="离职确认"
        prop="asset"
        class="required label-right-align"
        label-width="120px"
      >
        <el-link
            :href="formData?.confirm"
            type="primary"
            target="_blank"
            >查看文件</el-link
          >
      </el-form-item>
      <el-form-item
        label="财务确认"
        prop="asset"
        class="required label-right-align"
        label-width="120px"
      >
      <el-link
            :href="formData?.asset"
            type="primary"
            target="_blank"
            >查看文件</el-link
          >
      </el-form-item>
      <el-form-item
        label="离职退群确认"
        prop="contact"
        class="required label-right-align"
        label-width="120px"
      >
      <el-link
            :href="formData?.contact"
            type="primary"
            target="_blank"
            >查看文件</el-link
          >
      </el-form-item>
      <el-form-item
        label="其他说明"
        prop="content"
        class="required label-right-align"
        label-width="120px"
      >
        <div v-html="formData.content"></div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogClose">关闭</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  defineExpose,
  defineEmits,
  onMounted,
  watch,
} from "vue";
import { ElMessage } from "element-plus";
import Uediter from "@/components/UE.vue";
import { getLeaveApi } from "@/api/company/staff";
const formData = ref<any>({})
const dialogFormVisible = ref(false);
const dialogClose = () => {
  dialogFormVisible.value = false;
};

const handleOpen = (id: number) => {
  getLeaveApi(id).then((res:any)=>{
    if(res.data){
      formData.value = res.data;
    }
  })
  dialogFormVisible.value = true;
};

const handleClose = () => {
  dialogFormVisible.value = false;
};

defineExpose({
  handleOpen,
});
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
</style>

<style lang="scss" scoped></style>
